<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <h1>演示：自己封装的工具库</h1>


    <h1>日期格式化</h1>
    <script src="./utils.js"></script>
    <script>
        Formatime('2021-11-25 7:20:20')   
    </script>


    <h1>判断浏览器内核</h1>
    <script src="./utils.js"></script>
    <script>
        explorer()
    </script>



    <h1>判断是否是移动端</h1>
    <script src="./utils.js"></script>
    <script>
        if (browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad) {
            alert('移动端');
        } else (
            alert('PC')
        ) 
    </script>





    <h1>图片懒加载</h1>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
    <div class="picture">
        <img height="400" style="display:block" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015af75b58229ca801215c8fbb2a41.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640922332&t=671b58142ac23d30c009b5034f14f4e6"
            alt="" src-rel="./images/1.jpg">
        <img height="400" style="display:block" id="two" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015af75b58229ca801215c8fbb2a41.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640922332&t=671b58142ac23d30c009b5034f14f4e6"
            alt="" src-rel="./images/2.jpeg">
        <img height="400" style="display:block" id="three" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015af75b58229ca801215c8fbb2a41.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640922332&t=671b58142ac23d30c009b5034f14f4e6"
            alt="" src-rel="./images/3.jpeg">
        <img height="400" style="display:block" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015af75b58229ca801215c8fbb2a41.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640922332&t=671b58142ac23d30c009b5034f14f4e6"
            alt="" src-rel="./images/4.jpg">
        <img height="400" style="display:block" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015af75b58229ca801215c8fbb2a41.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640922332&t=671b58142ac23d30c009b5034f14f4e6"
            alt="" src-rel="./images/5.jpg">
    </div>
    <script src="./lazyload.js"></script>
    <script>
        lazyload()
    </script>


 <h1>COOKIE存储、获取、删除</h1>
<script src="./cookie.js"></script>
<script>
setcookie('name','zzh',10)
setcookie('age','18',11)
// console.log(getcookie('name'));

console.log(getcookie(name));

removecookie('name')
</script>


<h1>jQuery</h1>
<div>01</div>
<div>02</div>
<div>03</div>
<script src="./jquery.js"></script>
<script>
let jqObj = $('div')
jqObj.css('color', 'red').css('background', 'skyblue')
jqObj.hasClass('class', 'one')
</script>


<h1>jq-懒加载Demo1</h1>
    <style>
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
    <div class="box">
        <img src="./img/loading.gif" alt="" data-src="./img/1.jpg">
        <img src="./img/loading.gif" alt="" data-src="./img/2.jpg">
        <img src="./img/loading.gif" alt="" data-src="./img/33.jpg">
        <img src="./img/loading.gif" alt="" data-src="./img/4.jpg">
    </div>
<script src="https://unpkg.com/jquery"></script>

</body>

</html>